<template>
	<view>
		<zero-loading type="circle" v-if="loading"></zero-loading>
		<view class="title "></view>
		
		<view v-if="progress_num==0" :style='{ height: mainHeight }'>
			<view class="flex align-center justify-center" style="height: 70%;width: 100%;">
				<view class="padding-bottom-xl">
					<view><image class='avatar-img' src='../../static/img/blank1.png'></image></view>
					<view class="text-center text-sm text-grey"><text >当前无进行中项目</text></view>
					<view class="text-center padding-top">
						<button @tap="onStart()" class="cu-btn round lg bg-blue">
							<text class="cuIcon-forward"><text class="padding-left-sm">开始更换</text></text> 
						</button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="progress_num>0">
			<view class="cu-bar solid-bottom ">
				<view class="action">
					
				</view>
				<view class="action">
					<view class="">
						<button @tap="onStart()" class="cu-btn bg-blue shadow sm margin-right-xxs">新增流程</button>
					</view>
				</view>
			</view>
				
			<scroll-view scroll-y="true" class="scroll-Y" :style='{ height: scrollHeight }' @scrolltoupper="" @scrolltolower="">
				<block v-for="(item, idx) in progress_list" :key="idx">
					<view class="item_panel margin-sm" hover-class="opcity" hover-stay-time="150">
						<view class="padding-sm flex align-center">
							<view class="flex-treble text-left">
								<!-- <text class="iconfont icon-house text-gray "></text> -->
								<text class=" text-icon-size  text-orange text-md padding-left-xs">进行中 {{item.step}}/7</text>
							</view>
							<view class="flex-sub text-right justify-center">
								<view class="">
									<text class="cuIcon-loading2 cuIconfont-spin text-orange"></text>
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left">场区:</view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xs ">
									{{item.farmname}}
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left">单元:</view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xs ">
									{{item.housename}}
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left">栏位:</view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xs ">
									{{item.hnum}}
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left">异常饲喂器SN:</view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xs ">
									{{item.old_sn}}
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left">新饲喂器SN:</view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xs ">
									{{item.new_sn}}
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-bottom padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left">更换原因:</view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xs ">
									{{item.reason}}
								</view>
							</view>
						</view>
													
					</view>
				</block>
			</scroll-view>
			
		</view>

		<view v-if="progress_num<0" :style='{ height: mainHeight }'>
			
		</view>
		<view @tap="onHis()" class="text-center">
			<text class="cuIcon-time text-white"></text>
			<text class="text-white padding-left-xs">查看历史</text>
		</view>
	</view>
</template>

<script>
	import * as api from 'common/api.js';
	import {
		API_HEAD
	} from '../../common/api';
	export default {
		data() {
			return {
				scrollHeight: 0,
				mainHeight:0,
				loading:false,
		
				title: '',
				progress_num:-1,
				progress_list:[],
			}
		},
		onReady() {
			// 计算scroll-view高度
			uni.getSystemInfo({
				success: resu => {
					//console.info("窗口高度:", resu.windowHeight)
					const query = uni.createSelectorQuery()
					query.select('.title').boundingClientRect()
					query.exec(res => {
		
						//console.info("顶部下拉区域:", res[0])
						this.mainHeight = resu.windowHeight - res[0].height - 50 + 'px';
						this.scrollHeight = resu.windowHeight - res[0].height - 100 + 'px';
						console.log('剩余高度', this.mainHeight);
					})
				}
			})
		},
		onShow: function() {
			console.info("show feed_node_replace")
			uni.setNavigationBarTitle({
				title: '更换饲喂器'
			});
			this.loadOnPrgress()
		},
		methods: {
			onStart(){
				uni.navigateTo({
					url: "/pages/feed_node_replace/add_replace"
				})
			},
			onHis(){
				uni.navigateTo({
					url: "/pages/feed_node_replace/histroy"
				})
			},
			loadOnPrgress(){
				var that = this
				var token = getApp().getToken()
				that.loading = true
				api.myRequest({
					url: '/Api/Device/FeednodeReplace/Page',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {
						page: 1,
						limit:10,
						unfinished:1,
					},
				}, false).then(res => {
					that.loading = false
					if (res.code >= 0) {

						var list = res.data
						console.info(list)
						that.progress_num = list.length
						that.progress_list = list
					} else {

					}
				}).catch(err => {
					that.loading = false
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.avatar-img {
		width: 400rpx;
		height: 400rpx;
		opacity: .9;
		border-radius: 50%;
		align-self: center;
	}
	.item_panel {
		min-height: 200rpx;
		border-radius: 5rpx;
		/* background-color: #192654; */
		background-color: rgba(100, 100, 100, 0.3);
	}
</style>
